<template>
  <div class="channel-edit">
    <van-cell>
      <div slot="title" class="channel-title">我的频道</div>
      <van-button
        type="danger"
        plain
        round
        size="mini"
        @click="isEdit = !isEdit"
        >{{ isEdit ? "完成" : "编辑" }}</van-button
      >
    </van-cell>

    <van-grid :column-num="4" class="channel-grid">
      <van-grid-item
        v-for="(channel, index) in userChannels"
        :icon="isEdit && index !== 0 ? 'clear' : ''"
        :key="channel.id"
        :text="channel.name"
        @click="onUserChannelClick(channel, index)"
        :class="{ isActive: active === index }"
      />
    </van-grid>

    <van-cell>
      <div slot="title" class="channel-title">频道推荐</div>
    </van-cell>

    <van-grid :column-num="4" class="channel-grid">
      <van-grid-item
        v-for="channel in recmmendChannels"
        :key="channel.id"
        :text="channel.name"
        @click="onAdd(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getArticles, addUserChannel, deleteUserChannel } from "@/api/channel";
import { mapState } from "vuex";
import { setItem } from "@/utils/storage";

export default {
  name: "ChannelEdit",
  props: {
    // 我的频道列表
    userChannels: {
      type: Array,
      required: true,
    },
    // 选中的频道
    active: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      allChannels: [], // 所有频道列表
      isEdit: false, // 是否为编辑状态
    };
  },
  computed: {
    ...mapState(["user"]),
    // 频道推荐列表
    recmmendChannels() {
      return this.allChannels.filter(
        (channel) =>
          !this.userChannels.some(
            (userChannel) => userChannel.id === channel.id
          )
      );
    },
  },
  methods: {
    // 加载所有频道列表
    async loadAllChannels() {
      const { data } = await getArticles();
      this.allChannels = data.data.channels;
    },

    // 点击推荐的频道，添加到我的频道
    async onAdd(channel) {
      this.userChannels.push(channel);

      if (this.user) {
        await addUserChannel({
          channels: [{ id: channel.id, seq: this.userChannels.length }],
        });
      } else {
        setItem("user-channels", this.userChannels);
      }
    },

    // 点击我的频道中的频道
    async onUserChannelClick(channel, index) {
      if (this.isEdit && index !== 0) {
        // 剔除我的频道
        this.userChannels.splice(index, 1);
        // 如果删除的频道在选中的频道之前
        if (index <= this.active) {
          this.$emit("deleteChannel", index);
        }

        if (this.user) {
          await deleteUserChannel(channel.id);
        } else {
          setItem("user-channels", this.userChannels);
        }
      } else {
        // 切换频道
        this.$emit("switchChannel", index);
      }
    },
  },
  created() {
    this.loadAllChannels();
  },
};
</script>

<style scoped lang="less">
.channel-edit {
  padding-top: 47px;

  .van-cell {
    height: 24px;
    padding: 0 11px;

    .channel-title {
      font-size: 16px;
      line-height: 32px;
      color: #333;
    }

    .van-button {
      width: 51px;
      bottom: 5px;
      color: #fa8f8f;
      border-color: #fba6a6;
    }
  }

  .channel-grid {
    padding-top: 16px;
    padding-bottom: 19px;

    /deep/.van-grid-item__content {
      padding-top: 21px;
      padding-bottom: 21px;

      .van-grid-item__text {
        margin-top: 0;
        font-size: 14px;
        color: #222;
      }

      .van-icon {
        position: absolute;
        top: 0;
        right: 3px;
        font-size: 20px;
        color: #ccc;
      }
    }

    .isActive {
      /deep/ .van-grid-item__text {
        color: red !important;
      }
    }
  }
}
</style>
